{% extends 'base.html' %}

{% block content %}
<div id="register-page" class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 p-4">
    <div class="w-full max-w-md">
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-shadow">
            <div class="bg-bank-gradient text-white p-6">
                <h1 class="text-2xl font-bold text-center">注册</h1>
                <p class="text-center mt-2 opacity-90">请填写注册信息</p>
            </div>
            <div class="p-6">
                <form id="register-form" class="space-y-4">
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                <i class="fa fa-user"></i>
                            </span>
                            <input type="text" id="username" name="username" class="input-field pl-10" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    <div>
                        <label for="pid" class="block text-sm font-medium text-gray-700 mb-1">身份证号</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                <i class="fa fa-id-card"></i>
                            </span>
                            <input type="text" id="pid" name="pid" class="input-field pl-10" placeholder="请输入身份证号" required>
                        </div>
                    </div>
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                <i class="fa fa-phone"></i>
                            </span>
                            <input type="text" id="phone" name="phone" class="input-field pl-10" placeholder="请输入手机号" required>
                        </div>
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="password" name="password" class="input-field pl-10" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <div>
                        <button type="submit" class="w-full btn-primary flex items-center justify-center">
                            <i class="fa fa-sign-in mr-2"></i> 注册
                        </button>
                    </div>
                    <div class="text-center text-sm text-gray-500">
                        已有账号? <a href="{% url 'login' %}" class="text-primary hover:underline">立即登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}